ReBar is a useful WordPress Plugin for improving User Experience during a blog post reading. This plugin adds a Progress Bar to the top or bottom of the page. As you read the post or scroll the page, the Reading Progress Bar is filled with the color or gradient.
Such indicators are very useful for long Posts and Articles to help readers understand how far they are from finishing the article.
Does not matter which browser users view your site. On Mobile, Tablet or Desktop PC. Chrome, Firefox, Opera, Safari, Edge or even the outdated versions of Internet Explorer – in all browsers, visitors will get an incredible reading progress experience. And this is especially important if your site has many long pages, such as a Blog, Portfolio, Corporate Website, eCommerce Project, Creative Agency, Real Estate Listing, Personal CV, a Restaurant or Retail Company, etc.
Reading Progress Bar tested and compatible with All Major WP Plugins: Yoast SEO, Contact Form 7, W3 Total Cache, NextGen Gallery, Slider Revolution, WooCommerce, etc. It also works perfectly and improves the user experience with popular Website Page Builders, like Elementor, Visual Composer, Gutenberg, Beaver Builder, Divi, Themify Builder, WP Bakery Page Builder, Layers WP, and many others.
The Plugin works perfectly with all major WordPress frameworks: Genesis, Divi, Themify, Warp 7, Ultimatum, Beans, Unyson, Gantry, and others.
Features
Gutenberg Ready
8 Predefined Styles Available
Customization every trifle: Color, Height, Position and more…
Works with Embedded Content
Tested and Compatible up to WordPress 5.2
Supported Touchpad Devices
Easy to Install and Use
Works with all Popular Themes
Awesome for Mobile and Tablets
Works in all Modern Browsers
Lightweight and Fast
Native Valid JavaScript, without jQuery
Works both for the entire website and for individual pages
All major browsers supported Chrome, Firefox, Safari, Edge, Internet Explorer, Opera
Compatible with WooCommerce Plugin
Super-Easy Admin Configuration
Mouse wheel, middle mouse and keyboard support
Installation Guide
Detailed Users Manual
Huge Customization Capabilities
6 months Included Support for CodeCanyon buyers
Installation
Installing the plugin in WordPress is simple and quick. After you have downloaded the archive with the plugin, you will see the archive with the plugin inside. After you downloaded unzipped purchased product you will see inside the archive with the plugin inster-gutenberg.zip There are two ways to install it:
Installation through the WordPress admin panel ( Recommended )
STEP 1
LogIn into WordPress as Admin
STEP 2
Go to Plugins > Add New
Add New Plugin to WordPress
STEP 3
Click Upload Plugin Button
Upload New Plugin to WordPress
STEP 5
Choose archive with Plugin and press Install Now Button
STEP 6
After Installing go back to the Plugins page and click Activate below plugin title
Activate Installed Plugin
Installation through FTP or build-in File manager
STEP 1
Use Login and Password to connect to your web-server via FTP or use your hosting file manager.
STEP 2
Upload archive with plugin to /wp-content/plugins
STEP 3
Unzip the archive
STEP 4
Installing finished. Go to the Plugins page and click Activate below plugin title.
Activate Installed Plugin
Settings
Reading Progress Bar compatible with all popular Website Page Builders, like Elementor, Visual Composer, Gutenberg, Beaver Builder, Divi, Themify Builder, WP Bakery Page Builder, Layers WP, and many others.
To open the plugin settings in the WordPress Sidebar menu go to Settings -> Rebar
ReBar settings
Color
This parameter sets the color of the progress bar. Any of 32 million colors are available for selection.
Height
This parameter sets the height(in pixels) of the progress bar. Values from 1 pixel to 20 pixels are available.
Position
Sets where the progress bar will be located. Two options are available for selection – at the top edge and at the bottom edge.
Style
Plugin has several predefined progress bar display styles:
Default
Gradient
Rounded
Plastic
Animated
iOS
Shine
Glow
CSS
Input box for the detailed progress bar styling. It is possible to use any CSS selectors from the specification CSS 3. Please note you probably have to use an expression !important for some rules.
Assignments
By selecting the specific assignments you can limit where progress bar should or shouldn’t be published. To have it published on all pages, simply do not specify any assignments.
If all of the assignments are set to Ignore, that progress bar will show up on all pages.
The progress bar will be limited to the pages matching those assignments after set one or more of the assignments to Include or Exclude.
Assignments have 3 states:
Ignore (Default)
Include
Exclude
By default the assignments are ignored, meaning the progress bar is not limited by assignments. To use an assignment, set the option to Include or Exclude depending on the desired effect.
If you set an assignment to Exclude, the progress bar is assigned to all pages that do not match that assignment.
Matching Method
ALL
Will be published if ALL of below assignments are matched.
ANY
Will be published if ANY (one or more) of below assignments are matched.
Assignment groups where Ignore is selected will be ignored.
WordPress Content
PAGE TYPE
Select on what page types the assignment should be active.
PAGES
Select on which pages the assignment should be active.
Post types
Select on what post types the assignment should be active.
POST
Select on which posts the assignment should be active.
CATEGORIES
Select the categories to assign.
Home Page
This will match the real home page.
Menu Items
MENU ITEMS
Select the menu items to assign to.
URL
URL MATCHES
Enter (part of) the URLs to match. Use a new line for each different match.
Save Changes
Do not forget to click Save Changes after changing plugin settings. After clicking this button, the settings will be saved and applied to all pages of the website.